<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		:destroy-on-close="true"
		mode="form"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			v-model="form1.data"
			:form-type="value.mode"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			@success="onFormSuccess"
		>
			<template v-slot:tips="{ form, keyName }">
				<view style="background-color: #f4faff;padding: 15px;font-size: 12px;line-height: 24px;">
					<text>
						说明：
						1. 下载商品导入模板
						2. 在 [商品导入模板] 工作表按规则添加商品数据，工作表名字禁止修改
						3. 等待上传结果（请勿关闭此页面）
						注意:
						1. 一次上传最多上传1000个商品。（本地运行可突破此限制）
						2. 系统会以你上传的商品编号作为商品识别码（如果编号为空，则会以商品名称作为商品识别码），如果编号已存在，则此商品不会导入。
					</text>
				</view>
			</template>
		</vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: {}
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "商品导入",
				submitText: "导入",
				cancelText: "关闭",
				showCancel: true,
				top: "7vh",
				width: "800px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					fileName:"",
					base64:"",
					imageMode:false
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "admin/business/sys/goods.importGoods",
					// 表单字段显示规则
					columns: [
						{ key:"", title:"商品导入（用excel表格快速导入本地商品）", type:"bar-title" },
						{ key:"fileName", title:"商品excel文件", type:"file", limit:1, accept:".xls,.xlsx", buttonText:"点击上传商品excel文件",
							// 此时的 onSuccess 需要自己实现
							onSuccess(data){
								// 此处写上传成功后，把数据赋值到你的表单变量中，如下
								// 多图上传 that.form1.data.file.push(data.url);
								// 单图上传 that.form1.data.file = data.url;
								that.form1.data.fileName = data.file.name;
								that.form1.data.base64 = data.base64;
							},
							httpRequest(obj){
								let { action, file, filename, data, headers, onProgress, onSuccess, onError } = obj;
								vk.pubfn.fileToBase64({
									file:file,
									success: (base64) => {
										onSuccess({
											file,
											base64,
										});
									}
								});
							},
							tips:[
								{ text:"你需要使用指定的模板文件才能正确导入！" },
								{
									text:"下载商品导入模板",
									click:()=>{
										this.downFile("static/excel/goods.xlsx","商品导入模板.xlsx");
									},
								}
							]
						},
						// {
						// 	key:"imageMode", title:"图片储存方式", type:"radio", disabled:true,
						// 	data:[
						// 		{ value:true, label:"克隆（图片使用新链接）" },
						// 		{ value:false, label:"不克隆（图片使用原链接）" }
						// 	],
						// 	tips:"如果选择图片克隆到云储存，会大大影响导入的速度，如果你的图片来源稳定（即不会被删除，则建议选择不克隆图片）"
						// },
						{ key:"tips", title:"", type:"text" },
					],
					// 表单验证规则
					rules: {
						fileName: [
							// 必填
							{ required: true, message: "请上传商品excel文件", trigger: ['blur','change'] }
						],
						cloneImage: [
							// 必填
							{ required: true, message: "请选择图片储存方式", trigger: ['blur','change'] }
						]
					},
					// 左侧label的宽度
					labelWidth: "120px",
				}
			}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { item={} } = that.value;
			// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
			//that.form1.data = vk.pubfn.copyObject(item);
		},
		// 监听 - 页面关闭
		onClose() {
			that.form1.data.fileName = "";
			that.form1.data.base64 = "";
		},
		// 监听 - 提交成功后
		onFormSuccess() {
			that.value.show = false; // 关闭页面
			that.$emit("success");
		},
		// 下载文件
		downFile(url, fileName){
			let pathname = window.location.pathname;
			let rootPath = vk.h5.getRootPath() + pathname;
			if (rootPath[rootPath.length-1] !== "/") rootPath += "/";
			let linkUrl = rootPath + url;
			let link = document.createElement("a");
			link.href = linkUrl;
			link.download = fileName;
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
	},
	watch: {

	},
	// 计算属性
	computed: {

	}
};
</script>

<style lang="scss" scoped></style>
